<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
	
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/static/xadmin/css/font.css">
	<link rel="stylesheet" href="/static/xadmin/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="/static/xadmin/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/xadmin/js/xadmin.js"></script>
	
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  
  <body>
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">权限分组</a>
        <a>
          <cite>分组列表</cite></a>
      </span>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">&#xe669;</i></a>
    </div>
	<div class="x-body">

	<div class="layui-btn-group" style="margin-left:400px"> 
	   <button class="layui-btn layui-btn-normal" id="btn-expand"><i class="layui-icon">&#xe625;</i>全部展开</button>
       <button class="layui-btn layui-btn-normal" id="btn-fold"><i class="layui-icon">&#xe623;</i>全部折叠</button>
	</div>
     &nbsp;&nbsp;
    <input type="text" id="edt-search" placeholder="输入关键字" style="width: 150px;border: 1px solid #DADADA;height:36px"/>
    <button class="layui-btn" id="btn-search"><i class="layui-icon">&#xe615;</i>搜索&nbsp;&nbsp;</button>
    <table id="NodeList" class="layui-table" lay-filter="NodeList"></table>
    </div>
	<!--树表格 https://github.com/whvcse/treetable-lay https://whvse.gitee.io/treetable-lay/test5.html -->
	<script>
    layui.config({
        base: '/static/xadmin/lib/layui/lay/modules/'
    }).extend({
        treetable: 'treetable-lay/treetable'
    }).use(['table', 'treetable'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var treetable = layui.treetable;

        // 渲染表格
        layer.load(2);
        treetable.render({
            treeColIndex: 2,
            treeSpid: 0,
            treeIdName: 'Id',
            treePidName: 'Pid',
            elem: '#NodeList',
            url: '/rbac/node/Getlist' + location.search,
			headers: {'X-Requested-With':'XMLHttpRequest'},
            page: false,
            cols: [[
			    {type: 'checkbox'},
                {field: 'Id', width: 60,title: 'ID'},
                {field: 'Title', minWidth: 200,title: '显示名'},
                {field: 'Name',title: '应用名'},
				{field: 'Pid',title: 'PID'},
				{field: 'Level',title: '目录级别'},
				{field: 'Status', title: '状态',templet: function (d) {
                        if (d.Status == 2) {
                            return '<span style="color:#218868">启用</span>';
                        } else {
                            return '<span style="color:#7A8B8B">禁用</span>';
                        }
                    }
				
				},
                {field: 'Group__Id',title: '分组'},
				{field: 'Remark',title: '描述'}
            ]],
            done: function () {
                layer.closeAll('loading');
            }
        });

        $('#btn-expand').click(function () {
            treetable.expandAll('#NodeList');
        });

        $('#btn-fold').click(function () {
            treetable.foldAll('#NodeList');
        });

        $('#btn-search').click(function () {
            var keyword = $('#edt-search').val();
            var searchCount = 0;
            $('#auth-table').next('.treeTable').find('.layui-table-body tbody tr td').each(function () {
                $(this).css('background-color', 'transparent');
                var text = $(this).text();
                if (keyword != '' && text.indexOf(keyword) >= 0) {
                    $(this).css('background-color', 'rgba(250,230,160,0.5)');
                    if (searchCount == 0) {
                        treetable.expandAll('#auth-table');
                        $('html,body').stop(true);
                        $('html,body').animate({scrollTop: $(this).offset().top - 150}, 500);
                    }
                    searchCount++;
                }
            });
            if (keyword == '') {
                layer.msg("请输入搜索内容", {icon: 5});
            } else if (searchCount == 0) {
                layer.msg("没有匹配结果", {icon: 5});
            }
        });
    });
</script>
<!--树表格-->
  </body>

</html>